<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API 测试 - Tiny 框架</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            color: #333;
            max-width: 800px;
            margin: 0 auto;
        }
        
        pre {
            background-color: #f5f5f5;
            padding: 15px;
            border-radius: 4px;
            overflow-x: auto;
        }
        
        code {
            font-family: Consolas, monospace;
        }
        
        .endpoint {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 15px;
            margin-bottom: 20px;
        }
        
        .endpoint h3 {
            margin-top: 0;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }
        
        .btn {
            display: inline-block;
            background-color: #0066cc;
            color: white;
            padding: 8px 15px;
            text-decoration: none;
            border-radius: 4px;
            cursor: pointer;
        }
        
        .btn:hover {
            background-color: #0055b3;
        }
        
        #results {
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background-color: #f5f5f5;
            min-height: 100px;
        }
    </style>
</head>
<body>
    <h1>API 测试</h1>
    
    <div class="endpoint fade-in">
        <h3>GET /hello</h3>
        <p>返回一个简单的欢迎消息</p>
        <button class="btn" onclick="testHello()">测试</button>
    </div>
    
    <div class="endpoint fade-in">
        <h3>GET /static</h3>
        <p>测试静态资源访问</p>
        <button class="btn" onclick="testStatic()">测试</button>
    </div>
    
    <h2>结果：</h2>
    <div id="results">
        <p>请点击上面的按钮来测试 API...</p>
    </div>
    
    <div class="footer">
        <p>Tiny 框架 &copy; 2025 北芝科技</p>
        <p><a href="/static/index.html">返回首页</a></p>
    </div>
    
    <script>
        function displayResult(method, url, status, data) {
            const resultsDiv = document.getElementById('results');
            resultsDiv.innerHTML = `
                <h3>请求</h3>
                <pre><code>${method} ${url}</code></pre>
                <h3>状态码</h3>
                <pre><code>${status}</code></pre>
                <h3>响应数据</h3>
                <pre><code>${data}</code></pre>
            `;
        }
        
        function displayError(method, url, error) {
            const resultsDiv = document.getElementById('results');
            resultsDiv.innerHTML = `
                <h3>请求</h3>
                <pre><code>${method} ${url}</code></pre>
                <h3>错误</h3>
                <pre><code>${error}</code></pre>
            `;
        }
        
        function testHello() {
            fetch('/hello')
                .then(response => {
                    const status = `${response.status} ${response.statusText}`;
                    return response.text().then(data => {
                        displayResult('GET', '/hello', status, data);
                    });
                })
                .catch(error => {
                    displayError('GET', '/hello', error);
                });
        }
        
        function testStatic() {
            fetch('/static/css/style.css')
                .then(response => {
                    const status = `${response.status} ${response.statusText}`;
                    return response.text().then(data => {
                        // 限制显示的 CSS 内容长度
                        const preview = data.length > 500 
                            ? data.substring(0, 500) + '...' 
                            : data;
                        displayResult('GET', '/static/css/style.css', status, preview);
                    });
                })
                .catch(error => {
                    displayError('GET', '/static/css/style.css', error);
                });
        }
    </script>
</body>
</html> 